<template>
    <div>
     <div class="container "> 
         <h2>老师课时消费统计</h2>
         <el-divider></el-divider>
         <el-form    class="form-demo">
             <el-form-item label="统计时段">
           <el-radio-group v-model="form.time">
             <el-radio value="month">月</el-radio>
             <el-radio value="season">季</el-radio>
             <el-radio value="year">年</el-radio>
           </el-radio-group>
         </el-form-item>
          <el-form-item label="查找年份" v-if="form.time != 'year'">
           <el-select v-model="form.year" placeholder="选择年份" placement="top-start">
               <el-option
                 v-for="year in yearRange"
                 :key="year"
                 :label="year"
                 :value="year" />
               </el-select>
         </el-form-item>
         <el-row v-else>
             <el-col :span="12">
                     <el-form-item label="开始年份">
                   <el-select v-model="form.startYear" placeholder="选择年份">
                    <el-option
                             v-for="year in yearRange"
                             :key="year"
                             :label="year"
                             :value="year">
                             </el-option>
                   </el-select>
                 </el-form-item>
             </el-col>
             <el-col :span="12">
                <el-form-item label="结束年份">
                   <el-select v-model="form.endYear" placeholder="选择年份">
                     <el-option
                             v-for="year in yearRange"
                             :key="year"
                             :label="year"
                             :value="year"
                             :disabled="year < form.startYear">
                             </el-option>
                     </el-select>
                 </el-form-item>
             </el-col>
         </el-row>
         <el-form-item>
           <el-button type="primary" @click="bindConfirm">统计</el-button>
           <el-button @click="cancel">取消</el-button>
         </el-form-item>
         </el-form>
     </div>

     <div ref="chartDom" style="height: 400px; margin-top: 20px;" class="mt20"></div>

</div> 
</template>

<script setup>
import { ref, reactive} from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { useYear } from '@/api/statistic'//
const form = reactive({
 time: 'month',
 year: '2021',
 startYear: '2021',
 endYear: '2024'
})
//动态生成年份
const { yearRange } = useYear()


// 绘制统计图
const chartDom = ref(null)
//绘制课程统计  todo这个页面图标没有画
let chartInstance = ref(null)


const bindConfirm = () => {
 if (chartInstance == null || chartInstance.dispose) {
    chartInstance = echarts.init(chartDom.value)
 }
 
 
}
//取消按钮
const cancel = () => {
 form.year = "2021"
 form.time = "month"
 chartInstance.dispose()
}
</script >
<style lang="less" scoped>

.form-demo{
  width: 70%;
  padding-left: 10%;
}
.form-demo .el-select{
  width:200px;
}
</style>